<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数独游戏</title>
    <style>
        .table1{
            width: 500px;
            height: 500px;
            border: 5px black solid;
            border-collapse: collapse;
        }
        .table1 > tbody > tr > td{
            border: 5px black solid;
            padding: 0;
            width: 33.33333%;
            height: 33.33333%;
        }
        .table2{
            width: 100%;
            height: 100%;
            border: none;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
        }
        .table2 > tbody > tr > td{
            border: 1px black solid;
            text-align: center;
            width: 33.33333%;
            height: 33.33333%;
        }
    </style>
</head>
<body>
    <table class="table1">
        <tr>
            <td class="td1"></td>
            <td class="td1"></td>
            <td class="td1"></td>
        </tr>
        <tr>
            <td class="td1"></td>
            <td class="td1"></td>
            <td class="td1"></td>
        </tr>
        <tr>
            <td class="td1"></td>
            <td class="td1"></td>
            <td class="td1"></td>
        </tr>
    </table>
    <br>
    鼠标选中单元格，点击按钮输入数字，点击delete按钮删除单元格中的数字，题目事先给出的数字不能删除。
    <div>
        <button type="button">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <button type="button">4</button>
        <button type="button">5</button>
        <button type="button">6</button>
        <button type="button">7</button>
        <button type="button">8</button>
        <button type="button">9</button>
        <button type="button" onclick="deleteNumber()">delete</button>
        <button type="button" onclick="goBack()">恢复为初始</button>
    </div>
    <br>
    <div id="ans">
        <button type="button" onclick="getAnswer()">获取答案</button>
    </div>


    <script type="text/javascript">
        const myIPAddress = 'http://192.168.1.103:8001';//修改为自己的后端服务器的地址和端口号
        const square1 = [
            [0,1,2],[9,10,11],[18,19,20]
        ];
        const square2 = [
            [3,4,5],[12,13,14],[21,22,23]
        ];
        const square3 = [
            [6,7,8],[15,16,17],[24,25,26]
        ];
        const square4 = [
            [27,28,29],[36,37,38],[45,46,47]
        ];
        const square5 = [
            [30,31,32],[39,40,41],[48,49,50]
        ];
        const square6 = [
            [33,34,35],[42,43,44],[51,52,53]
        ];
        const square7 = [
            [54,55,56],[63,64,65],[72,73,74]
        ];
        const square8 = [
            [57,58,59],[66,67,68],[75,76,77]
        ];
        const square9 = [
            [60,61,62],[69,70,71],[78,79,80]
        ];
        const arr1 = [square1, square2, square3,square4, square5, square6,
            square7, square8, square9];
        let sum = 81;//剩余空格数量
        let str;//接受后端返回值，长度为81的字符串

        function createTable() {//遍历table1的所有单元格，每个单元格嵌套一个3×3的表格
            let x = document.getElementsByClassName("td1");
            for (let i = 0; i < 9; i++) {
                let square = arr1[i];
                let s1 = "<table class=\"table2\">";
                for (let k = 0; k < 3; k++) {
                    s1 += "<tr>";
                    for (let j = 0; j < 3; j++) {
                        let id = square[k][j];
                        s1 += "<td id='id" + id + "'></td>";
                    }
                    s1 += "</tr>";
                }
                s1 += "</table>";
                x[i].innerHTML = s1;
            }
        }
        function getNewProblem() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', myIPAddress + '/problem');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
                    str = xhr.response;
                    for (let i = 0; i < str.length; i++) {//遍历81个字符
                        let id = "id" + i;
                        let element = document.getElementById(id);
                        let num = str[i];//需要填入的数字
                        if (num >= 1 && num <= 9) {
                            sum--;
                            element.innerHTML = num;
                            element.style.backgroundColor = "yellow";
                        } else {
                            element.onclick = function () {//选中单元格
                                for (let j = 0; j < 81; j++) {
                                    let x = document.getElementById("id" + j);
                                    if (x.style.backgroundColor === "yellow") {
                                        continue;//原始数字不能被修改
                                    }
                                    x.style.backgroundColor = "transparent";
                                }
                                element.style.backgroundColor = "blue";
                            }
                        }
                    }
                }
            }
        }
        function compare(x, y) {
            return parseInt(x.innerHTML) === y;
        }
        function setButtons() {
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < 9; i++) {//遍历按钮1-9
                const num = i + 1;
                buttons[i].onclick = function () {
                    let x, j;
                    for (j = 0; j < 81; j++) {
                        x = document.getElementById("id" + j);
                        if (x.style.backgroundColor === "blue") {//找到被选中的单元格
                            break;
                        }
                    }
                    if (x === null) {
                        return;
                    }
                    x.style.backgroundColor = "transparent";
                    if (parseInt(x.innerHTML) === j+1) {
                        return;//按钮数字与单元格数字相同，不需要处理，直接返回
                    }
                    let x1 = parseInt(j / 9 + "");//第几行
                    let y1 = j - 9 * x1;//第几列
                    for (let k = 9 * x1; k < 9 * (x1 + 1); k++) {//遍历单元格所在行
                        if (parseInt(document.getElementById("id" + k).innerHTML) === num) {
                            alert("输入错误");
                            return;
                        }
                    }
                    for (let k = y1; k < 81; k += 9) {//遍历单元格所在列
                        if (parseInt(document.getElementById("id" + k).innerHTML) === num) {
                            alert("输入错误");
                            return;
                        }
                    }
                    let x2 = parseInt(x1 / 3 + "");
                    let y2 = parseInt(y1 / 3 + "");
                    let square = 3 * x2 + y2;
                    const arr2 = arr1[square];
                    for (let k = 0; k < arr2.length; k++) {
                        for (let l = 0; l < arr2[k].length; l++) {//遍历单元格所在的3×3小正方形区域
                            if (parseInt(document.getElementById("id" + arr2[k][l]).innerHTML) === num) {
                                alert("输入错误");
                                return;
                            }
                        }
                    }
                    x.innerHTML = String(i + 1);
                    sum--;
                    if (sum === 0) {
                        alert("恭喜你完成本题");
                        location.reload();
                    }
                };
            }
        }

        function getAnswer() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', myIPAddress + '/answer?problem=' + str);
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
                    let res = xhr.response;
                    let x = document.getElementById("ans");
                    x.innerHTML = "<ol>" + res + "</ol>";
                }
            }
        }
        function deleteNumber() {
            let x, j;
            for (j = 0; j < 81; j++) {
                x = document.getElementById("id" + j);
                if (x.style.backgroundColor === "blue") {
                    x.style.backgroundColor = "transparent";
                    break;
                }
            }
            if (x.innerHTML.length > 0) {
                x.innerHTML = '';
                sum++;
            }
        }
        function goBack() {
            let count = 0;
            for (let i = 0; i < 81; i++) {
                let x = document.getElementById("id" + i);
                if (x.style.backgroundColor !== "yellow") {
                    count++;
                    x.innerHTML = '';
                    x.style.backgroundColor = "transparent";
                }
            }
            sum = count;
            alert("恢复初始状态，剩余" + sum + "个空格");
        }

        window.onload = function () {
            createTable();
            getNewProblem();
            setButtons();
        };
    </script>
</body>
</html>